{ "cells": [ { "cell_type": "markdown", "metadata": {}, "source": [ "# 1. Introduction" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "Welcome to **CS110: Introduction to Computing!**" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "## 1.1 What to expect\n", "\n", "* hands-on, active learning\n", "* less lecture, more discussions and demonstrations" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "## 1.2 How to study" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "1. Keep a running list of jargon with definitions.\n", "2. do it!\n", "3. review it!" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "## 1.3 Let's get started!" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "1. Doug passes out pass phrases to Jupyter\n", "2. You log in\n", "3. Create a new notebook" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "## 1.4 Your first program\n", "\n", "Jargon:\n", "\n", "* canvas, or screen\n", "* coordinate system\n", " * 0,0 in upper left-hand corner\n", "* function: `rect()`\n", "* arguments: `x, y, width, height`" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "" ] }, { "cell_type": "code", "execution_count": 1, "metadata": {}, "outputs": [ { "data": { "application/javascript": [ "\n", " var component = document.getElementById(\"sketch_1\");\n", " if (component != undefined)\n", " component.remove();\n", " component = document.getElementById(\"state_1\");\n", " if (component != undefined)\n", " component.remove();\n", " component = document.getElementById(\"controls_div_1\");\n", " if (component != undefined)\n", " component.remove();\n", " require([window.location.protocol + \"//calysto.github.io/javascripts/processing/processing.js\"], function() {\n", " // FIXME: Stop all previously running versions (?)\n", " var processingInstance = Processing.getInstanceById(\"canvas_1\");\n", " if (processingInstance != undefined && processingInstance.isRunning())\n", " processingInstance.noLoop();\n", " });\n", "\n", "\n", " var output_area = this;\n", " // find my cell element\n", " var cell_element = output_area.element.parents('.cell');\n", " // which cell is it?\n", " var cell_idx = Jupyter.notebook.get_cell_elements().index(cell_element);\n", " // get the cell object\n", " var cell = Jupyter.notebook.get_cell(cell_idx);\n", "\n", " function jyp_print(cell, newline) {\n", " return function(message) {\n", " cell.get_callbacks().iopub.output({header: {\"msg_type\": \"stream\"},\n", " content: {text: message + newline,\n", " name: \"stdout\"}});\n", " }\n", " }\n", " window.jyp_println = jyp_print(cell, \"\\n\");\n", " window.jyp_print = jyp_print(cell, \"\");\n", "\n", " require([window.location.protocol + \"//calysto.github.io/javascripts/processing/processing.js\"], function() {\n", " Processing.logger.println = jyp_print(cell, \"\\n\");\n", " Processing.logger.print = jyp_print(cell, \"\");\n", " });\n", "\n", "\n", " " ], "text/plain": [ "" ] }, "metadata": {}, "output_type": "display_data" }, { "data": { "text/html": [ "\n", "
\n", " Sketch #1:
\n", "
\n", "
\n", "
\n", " \n", " \n", " \n", " \n", "
\n", "Sketch #1 state: Loading...
\n", "\n" ], "text/plain": [ "" ] }, "metadata": {}, "output_type": "display_data" } ], "source": [ "rect(20, 20, 40, 40);" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "You did it! You wrote your first Processing program, or *sketch*.\n", "\n", "But it doesn't look exactly like our idea above. We'd like for the square to be black.\n", "\n", "Another function: `fill()`\n", "\n", "Another argument: grayscale, representing how much lightness:\n", "\n", "* 0: completely black\n", "* 255: completely white\n", "\n", "Anything between 0 and 255 is a shade of gray, the larger the number, the lighter the gray. There are a total of 256 shades of gray counting 0, to 255." ] }, { "cell_type": "code", "execution_count": 2, "metadata": {}, "outputs": [ { "data": { "application/javascript": [ "\n", " var component = document.getElementById(\"sketch_2\");\n", " if (component != undefined)\n", " component.remove();\n", " component = document.getElementById(\"state_2\");\n", " if (component != undefined)\n", " component.remove();\n", " component = document.getElementById(\"controls_div_2\");\n", " if (component != undefined)\n", " component.remove();\n", " require([window.location.protocol + \"//calysto.github.io/javascripts/processing/processing.js\"], function() {\n", " // FIXME: Stop all previously running versions (?)\n", " var processingInstance = Processing.getInstanceById(\"canvas_2\");\n", " if (processingInstance != undefined && processingInstance.isRunning())\n", " processingInstance.noLoop();\n", " });\n", "\n", "\n", " var output_area = this;\n", " // find my cell element\n", " var cell_element = output_area.element.parents('.cell');\n", " // which cell is it?\n", " var cell_idx = Jupyter.notebook.get_cell_elements().index(cell_element);\n", " // get the cell object\n", " var cell = Jupyter.notebook.get_cell(cell_idx);\n", "\n", " function jyp_print(cell, newline) {\n", " return function(message) {\n", " cell.get_callbacks().iopub.output({header: {\"msg_type\": \"stream\"},\n", " content: {text: message + newline,\n", " name: \"stdout\"}});\n", " }\n", " }\n", " window.jyp_println = jyp_print(cell, \"\\n\");\n", " window.jyp_print = jyp_print(cell, \"\");\n", "\n", " require([window.location.protocol + \"//calysto.github.io/javascripts/processing/processing.js\"], function() {\n", " Processing.logger.println = jyp_print(cell, \"\\n\");\n", " Processing.logger.print = jyp_print(cell, \"\");\n", " });\n", "\n", "\n", " " ], "text/plain": [ "" ] }, "metadata": {}, "output_type": "display_data" }, { "data": { "text/html": [ "\n", "
\n", " Sketch #2:
\n", "
\n", "
\n", "
\n", " \n", " \n", " \n", " \n", "
\n", "Sketch #2 state: Loading...
\n", "\n" ], "text/plain": [ "" ] }, "metadata": {}, "output_type": "display_data" } ], "source": [ "fill(0);\n", "rect(20, 20, 40, 40);" ] }, { "cell_type": "markdown", "metadata": { "collapsed": true }, "source": [ "## 1.5 Summary" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "* New jargon:\n", " * program, code, or sketch\n", " * canvas\n", " * pixel\n", " * function\n", " * arguments\n", " * coordinate system\n", " * x-coordinate, x-axis\n", " * y-coordinate, y-axis\n", " * origin\n", " * ordering: code, top to bottom; drawing: back to front\n", "* For Review, see Dan's lecture: http://hello.processing.org/editor/" ] }, { "cell_type": "code", "execution_count": 3, "metadata": { "collapsed": true }, "outputs": [], "source": [ "%activity /home/dblank/activities/01-intro" ] } ], "metadata": { "kernelspec": { "display_name": "Calysto Processing", "language": "java", "name": "calysto_processing" }, "language_info": { "codemirror_mode": { "name": "text/x-java", "version": 2 }, "file_extension": ".java", "mimetype": "text/x-java", "name": "java" }, "widgets": { "state": { "54a78147705c49db8c1e6bf3af577b20": { "views": [ { "cell_index": 0 } ] } }, "version": "1.2.0" } }, "nbformat": 4, "nbformat_minor": 1 }